<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/chinaz.css" />
		<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
		<script src="js/js.js"></script>
		<style type="text/css">
			html {
				font-size: 62.5%;
				/*10 ÷ 16 × 100% = 62.5%*/
			}
			
			body {
				background-color: #ffffff;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.mui-badge {
				/*float: right;*/
			}
			
			.title {
				padding-left: 10px;
			}
			
			.title span {
				width: 30px;
			}
			
			.yangshi {
				font-size: 12px;
				color: #999999;
				line-height: 13px;
				margin-top: 15px;
				display: inline-block;
				position: absolute;
				bottom: 10px;
			}
			
			#add_now {
				display: none;
			}
			
			#add_before {}
			
			#ul_list a {
				display: inline-block;
				width: auto;
				padding: 0 20px;
				line-height: 38px;
				display: table-cell;
				overflow: hidden;
				width: 1%;
				-webkit-transition: background-color .1s linear;
				transition: background-color .1s linear;
				text-align: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: inherit;
				border: 0;
			}
			
			._title {
				position: fixed;
				height: 201px;
				width: 100%;
				opacity: 1;
				background-color: #FFFFFF;
				z-index: 0;
				right: 0;
				left: 0;
				border-bottom: 0;
				/*top: 44px;*/
			}
			
			._title img {
				width: 100%;
				height: 8.7rem;
			}
			
			.mui-content {
				position: absolute;
				top: 240px;
				width: 100%;
				color: #333333 !important;
				font-family: "微软雅黑";
				background-color: #FFFFFF;
			}
			
			.mui-content p {
				color: #333333 !important;
				font-family: "微软雅黑";
			}
			
			h5 {
				color: #333333;
				font-size: 1.8rem;
			}
			
			#ul_list {
				position: fixed;
				z-index: 10;
				right: 0;
				left: 0;
				height: 44px;
				padding-right: 10px;
				padding-left: 10px;
				border-bottom: 0;
				background-color: #f7f7f7;
				top: 44px;
				width: 100%;
			}
			
			.find_nav {
				top: 44px;
				display: none;
			}
			
			#_title p {
				color: #999999;
				font-size: 42rem !important;
			}
			
			#_title h4 {
				font-size: 42rem !important;
			}
			
			.mui-table-view:after,
			.mui-table-view:before {
				background-color: #FFFFFF !important;
			}
			
			.mui-table-view .mui-media-object {
				height: auto;
				max-width: 97px !important;
			}
			
			.mui-table-view .mui-media,
			.mui-table-view .mui-media-body {
				width: auto;
				white-space: normal;
			}
			
			.active_bar {
				background-color: rgba(255, 255, 255, 0);
				box-shadow: initial;
			}
			
			.nav_underline {
				width: 30px;
				line-height: 3px;
				background-color: #d4edff;
				height: 0.5rem;
				border-radius: 5px;
				position: relative;
				left: 9px;
			}
			
			.nav_center {
				width: 1px;
				background-color: #B6B6C8;
				display: inline-block;
				width: 1px !important;
				line-height: -12px;
				height: 15px;
				padding: 1px;
				margin: 2px;
				position: relative;
				top: 3px;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
//			mui.init();
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav active_bar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333333 !important;"></a>
			<h1 class="mui-title"></h1>
			<a class="mui-icon mui-icon-more mui-icon-right-nav mui-pull-right" style="color: #333333 !important;"></a>
		</header>
		<!--<div id="ul_list">-->
		<div class="find_nav">
			<div class="find_nav_left">
				<div class="find_nav_list">
					<ul class="nav_list">
						<li class="find_nav_cur">
							<a href="#add_1" class="nav_a">资讯</a>
						</li>
						<li>
							<a href="#add_2" class="nav_a">分析</a>
						</li>
						<li>
							<a href="#add_3" class="nav_a">原创</a>
						</li>
						<li class="sideline"></li>
					</ul>
				</div>
			</div>
		</div>
		<!--</div>-->
		<div class="_title">
			<img src="http://inews.gtimg.com/newsapp_ls/0/2112140561_640130/0">
			<div id="" style="padding: 10px;">
				<h4 style="font-size: 2.1rem;">聚焦十九大</h4>
				<p style="font-size: 1.5rem;">党的党的十九大于10月18日至10月24日在北京召开，十九大闭幕后，将召开十九届一中全会。一中全会结束后，新一届中央政治局常委将同中外记者见面。</p>
			</div>
		</div>
		<div class="mui-content" style="padding-top: 0;" id="title_1">
		</div>
	</body>
	<script>
		$(function() {
			/*添加导航*/
			//			addnav()
			/*添加导航*/
			var md_id = [];
			$(".nav_list li").each(function() {
				var id = $(this).find("a").attr("href");
				md_id.push(id)
			})
			console.log(md_id)
			md_id = $.grep(md_id, function(n) {
				return $.trim(n).length > 0;
			})
			console.log(md_id)
			$(window).bind("scroll", function() {
				var addh1 = $("#add_1").height();
				var addh2 = $("#add_2").height();
				var addh3 = $("#add_3").height();
				var sTop = $(window).scrollTop();
				var add1 = $("#add_1").offset().top;
				var add2 = $("#add_2").offset().top;
				var add3 = $("#add_3").offset().top;
				var sTop = parseInt(sTop);
				if(sTop >= 60) {
					$("._title").fadeOut(800);
					$(".find_nav").show(500);
					$("._title").css({
						"top": "44px;"
					})
					$(".mui-content").css({
						"top": "240px"
					})
					$(".mui-bar-nav").show(500);
					$(".mui-bar").removeClass("active_bar");
					$(".mui-title").html("十九大")
				} else {
					$("._title").fadeIn(800);
					$("._title").css({
						"top": "88px;"
					})
					$(".find_nav").hide();
					$(".mui-content").css({
						"top": "240px"
					})
					$(".mui-bar").addClass("active_bar");
					$(".mui-title").html("")
				}
				
				addh1 = add(add1,addh1); 
				addh2 = add(add2,addh2); 
				addh3 = add(add3,addh3); 
				if(add1 <= sTop && sTop <= addh1) {  
					huadonggd(0)
				} else if(add2 <= sTop && sTop <= addh2) {
					huadonggd(1)
				} else if(add3 <= sTop && sTop <= addh3){
					huadonggd(2)
				}
			});
			function add(a,b){
				a = (a-90)+b;
				return a;
			}
			var json = { 
				first: [{
						"id": 1,
						"title": "十九大一",
						"title_list": "环保督察后企业污染问题会不会死灰复燃？环保部长回应",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2197931467_150120/0",
						"title_time": "2017-10-23",
						"title_name": "人民网",
						"title_pj": "14评"
					},
					{
						"id": 1,
						"title": "十九大一",
						"title_list": "环保督察后企业污染问题会不会死灰复燃？环保部长回应",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2197931467_150120/0",
						"title_time": "2017-10-23",
						"title_name": "人民网",
						"title_pj": "14评"
					},
					{
						"id": 1,
						"title": "十九大一",
						"title_list": "环保督察后企业污染问题会不会死灰复燃？环保部长回应",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2197931467_150120/0",
						"title_time": "2017-10-23",
						"title_name": "人民网",
						"title_pj": "14评"
					},
					{
						"id": 1,
						"title": "十九大一",
						"title_list": "环保督察后企业污染问题会不会死灰复燃？环保部长回应",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2197931467_150120/0",
						"title_time": "2017-10-23",
						"title_name": "人民网",
						"title_pj": "14评"
					}
				],
				second: [{
						"id": 2,
						"title": "十九大二",
						"title_list": "环保部部长李干杰：污染治理力度之大前所未有",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2196644786_150120/0",
						"title_time": "2017-10-23",
						"title_name": "风华网",
						"title_pj": "14评"
					},
					{
						"id": 2,
						"title": "十九大二",
						"title_list": "环保部部长李干杰：污染治理力度之大前所未有",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2196644786_150120/0",
						"title_time": "2017-10-23",
						"title_name": "风华网",
						"title_pj": "14评"
					},
					{
						"id": 2,
						"title": "十九大二",
						"title_list": "环保部部长李干杰：污染治理力度之大前所未有",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2196644786_150120/0",
						"title_time": "2017-10-23",
						"title_name": "风华网",
						"title_pj": "14评"
					},
					{
						"id": 2,
						"title": "十九大二",
						"title_list": "环保部部长李干杰：污染治理力度之大前所未有",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2196644786_150120/0",
						"title_time": "2017-10-23",
						"title_name": "风华网",
						"title_pj": "14评"
					}
				],
				three: [{
						"id": 3,
						"title": "十九大二",
						"title_list": "环保部部长李干杰：污染治理力度之大前所未有",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2196644786_150120/0",
						"title_time": "2017-10-23",
						"title_name": "风华网",
						"title_pj": "14评"
					},
					{
						"id": 3,
						"title": "十九大二",
						"title_list": "环保部部长李干杰：污染治理力度之大前所未有",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2196644786_150120/0",
						"title_time": "2017-10-23",
						"title_name": "风华网",
						"title_pj": "14评"
					},
					{
						"id": 3,
						"title": "十九大二",
						"title_list": "环保部部长李干杰：污染治理力度之大前所未有",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2196644786_150120/0",
						"title_time": "2017-10-23",
						"title_name": "风华网",
						"title_pj": "14评"
					},
					{
						"id": 3,
						"title": "十九大二",
						"title_list": "环保部部长李干杰：污染治理力度之大前所未有",
						"title_img": "http://inews.gtimg.com/newsapp_ls/0/2196644786_150120/0",
						"title_time": "2017-10-23",
						"title_name": "风华网",
						"title_pj": "14评"
					}
				]
			}
			var str = "";
			var html = ""
			var nowid = "";
			var allid = "";

			function getJsonLength(jsonData) {
				var jsonLength = 0;
				for(var item in jsonData) {
					jsonLength++;
				}
				return jsonLength;
			}
			var json_length = getJsonLength(json)
			var x = 2;
			for(var i in json) {
				addcontent(json[i], x, "#title_1", json_length)
			}

			function addcontent(json, x, obj, json_length) {
				var jsonx_length = json.length;
				str = "";
				$.each(json, function(index, el) {
					nowid = el.id;
					allid = getJsonLength(json);
					if(index <= x) {
						str += "<li class='mui-table-view-cell mui-media' >" +
							"<a href='javascript:;'>" +
							"<img class='mui-media-object mui-pull-right' src='" + el.title_img + "'>" +
							"<div class='mui-media-body'>" +
							"<p>" + el.title_list + "</p>" +
							"<span class='yangshi'>" + el.title_name + "&nbsp&nbsp&nbsp" + el.title_pj + "&nbsp&nbsp&nbsp" + el.title_time + "</span>" +
							"</div>" +
							"</a>" +
							"</li>";
					}
				});
				html = "<div id='add_" + nowid + "'>" + "<h5 class='title'>" + "<span>" + nowid + "<span class='nav_center'>" + "</span>" + json_length + "</span>" + "十九大记者招待会" + "</h5>" + "<div class='nav_underline'>" + "</div>" + "<ul class='mui-table-view'>" +
					str +
					"<li class='mui-table-view-cell mui-media' style='text-align:center;border:none !important;' id='" + nowid + "'>" + "<a href='javascript:;'>" + "获取更多" + "<img src='img/down.png' style='position:relative;top:1px;left:2px;width:1rem;'>" + "</a>" + "</li>" +
					"<li class='mui-table-view-cell mui-media' style='text-align:center'  id='add_now" + nowid + "'>" + "<a href='javascript:;'>" + "<span class='mui-icon mui-icon-spinner mui-spin'>" + "</span>" + "加载中..." + "</a>" + "</li>"
				"</ul>" + "</div>";
				$(obj).append(html);
				/*获取div高度*/
//				var content_=[];
//				$("#title_1 div").each(function() {
//					var height = $(this).height();
//					content_.push(height)
//				})
//				console.log(content_)
				var v = 0;
				$("#add_now" + nowid).hide();
				$("#" + nowid).click(function() {
					var id = $(this).attr("id");
					for(var i in json) {
						if(json[i].id == id) {
							v++;
							x = v;
						}
					}
					$("#add_" + id).empty();
					addcontent(json, x, "#add_" + id, json_length)
				})
			}

			function addnav() {
				var nav = {
					one: [{
							"nav_text": "first",
							"href": "#add_1"
						},
						{
							"nav_text": "double",
							"href": "#add_2"
						},
						{
							"nav_text": "triple",
							"href": "#add_3"
						}
					]
				}
				var nav_html = "";
				var nav_str = "";
				$.each(nav.one, function(index, el) {
					nav_html += "<li>" + "<a href=" + el.href + ">" + el.nav_text + "</a>" + "</li>"
				});
				nav_str = nav_html + "<li class='sideline'>" + "</li>";
				$(".nav_list").append(nav_str);
				$(".nav_list li").eq(0).addClass("find_nav_cur");
				$(".sideline").css({
					"width": "10px"
				})
			}
			function huadonggd(x){
				var left = $(".find_nav_list li").eq(x).position().left;
					left = left + 25; 
					$(".sideline").css({
						left: left
					});
					$(".find_nav_list li").eq(x).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
			}
		})
	</script>

</html>

<!--http://blog.csdn.net/u011710960/article/details/54288310-->
<!--jquery.mousewheel.js-->